<template>
  <div class="Showcase1">
    <div class="Showcase1-top">
      <img
        class="Showcase1-top-left"
        :src="publicUrls + 'free/style6/Showcase3Topleft.webp'"
        alt=""
      />
      <img
        class="Showcase1-top-center"
        :src="publicUrls + 'free/style6/Showcase3Topcon.webp'"
        alt=""
      />
      <img
        class="Showcase1-top-right"
        :src="publicUrls + 'free/style6/Showcase3TopRight.webp'"
        alt=""
      />
    </div>
    <div class="Showcase1-center">
      <img
        class="Showcase1-center-left"
        :src="publicUrls + 'free/style6/Showcase3ConLeft.webp'"
        alt=""
      />
      <!-- <img
        class="Showcase1-center-center"
        :src="publicUrls + 'free/style6/Showcase3Con.webp'"
        alt=""
      /> -->
      <div class="Showcase1-center-center">
        <div
          class="titile-box"
          v-for="(item, index) in props.list"
          :key="index"
          :style="{
            left: `${ShowcaseItemTransform(item.x ? item.x : getParentX(Number(index)), item.width, 2.383)}rem`,
          }"
        >
          <p>
            {{ item.name }}
          </p>
        </div>
      </div>
      <img
        class="Showcase1-center-right"
        :src="publicUrls + 'free/style6/Showcase3ConRight.webp'"
        alt=""
      />
    </div>
    <div class="Showcase1-btm">
      <img
        class="Showcase1-btm-left"
        :src="publicUrls + 'free/style6/Showcase3Btmleft.webp'"
        alt=""
      />
      <img
        class="Showcase1-btm-center"
        :src="publicUrls + 'free/style6/Showcase3BtmCon.webp'"
        alt=""
      />
      <img
        class="Showcase1-btm-right"
        :src="publicUrls + 'free/style6/Showcase3BtmRight.webp'"
        alt=""
      />
    </div>

    <div class="inverted">
      <img :src="publicUrls + 'free/style6/Showcase4inverted1.webp'" alt="" class="left" />
      <img class="content" :src="publicUrls + 'free/style6/Showcase4inverted3.webp'" alt="" />
      <img :src="publicUrls + 'free/style6/Showcase4inverted2.webp'" alt="" class="right" />
    </div>
  </div>
</template>   

<script lang="ts">
export default defineComponent({
  name: 'free6Style3',
});
</script>
  
<script setup lang="ts">
import { publicUrls } from '@/utils/minxin';
import { ShowcaseItemTransform } from '@/utils/setmaterialStyle';
import { defineComponent } from 'vue';
const props = defineProps({
  list: {
    type: Object,
  },
});

const getParentX = (indexs: number) => {
  let x = 0;
  for (let index = 0; index < indexs; index++) {
    // const element = array[index];
    x = x + props.list[index].width;
  }
  return x + 0.3;
};
</script>  

<style scoped lang="less">
.Showcase1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 400px;
  height: 100%;
  position: relative;
  .inverted {
    position: absolute;
    bottom: -365px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    display: flex;
    align-items: flex-end;
    z-index: -1;
    opacity: 0.15;
    .left {
      width: 40px;
      height: 385px;
    }
    .content {
      min-width: 285px;
      flex: 1;
      height: 369px;
    }
    .right {
      width: 75px;
      height: 393.5px;
    }
  }
  .pole-box {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    img {
      width: 117px;
      height: 100%;
      position: absolute;
    }
  }
  .stone-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    img {
      width: 180px;
      height: 190px;
      position: absolute;
      bottom: 0;
    }
  }
}
.Showcase1-top {
  display: flex;
  height: 118px;
  width: 100%;

  .Showcase1-top-left {
    width: 40px;
    height: 100%;
    flex-shrink: 0;
  }
  .Showcase1-top-center {
    min-width: 285px;
    flex: 1;
    height: 100%;
  }
  .Showcase1-top-right {
    width: 75px;
    height: 100%;
    flex-shrink: 0;
  }
}

.Showcase1-center {
  display: flex;
  width: 100%;
  height: 100%;

  .Showcase1-center-left {
    width: 40px;
    height: 100%;
    flex-shrink: 0;
  }
  .Showcase1-center-center {
    flex: 1;
    height: 100%;
    background: url(https://static.jiyi.show/free/style6/Showcase3Con.png) no-repeat center/100% 100%;
    position: relative;
  }
  .Showcase1-center-right {
    width: 75px;
    height: 100%;
    flex-shrink: 0;
  }
}
.Showcase1-btm {
  width: 100%;
  height: 25px;
  display: flex;
  .Showcase1-btm-left {
    width: 40px;
    height: 100%;
  }
  .Showcase1-btm-center {
    min-width: 175px;
    flex: 1;
    height: 100%;
  }
  .Showcase1-btm-right {
    width: 75px;
    height: 100%;
  }
}
.titile-box {
  width: 265px;
  height: 68px;
  position: absolute;
  top: 45px;
  background: url(https://static.jiyi.show/free/style6/Showcase3titleBg.webp) no-repeat center /
    cover;
  padding: 0 20px;
  -webkit-box-reflect: below 380% linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));

  p {
    color: #5d6c80;
    text-align: center;
    font-family: 'SourceHanSerifCN-Bold';
    font-size: 14px;
    line-height: 68px;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
</style>